<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Item Information</title>

    <style>
        html {
            margin: 0;
            padding: 0;
            height: 100%;
            background: url('img/background.png') no-repeat center center;
            background-size: 95%;
            background-color: #000;
            background-attachment: fixed;
            image-rendering: pixelated;
        }

        body {
            margin: 0;
            padding: 0;
            min-height: 100%;
        }

        #top {
            height: 50px;
            width: 100%;
            background-color: #000;
            display: flex;
            align-items: center; /* 垂直居中 */
            justify-content: space-between; /* 左右两端对齐 */
            padding: 0 10px;
            box-sizing: border-box;
        }

        #loge {
            display: flex;
            align-items: center;
            gap: 8px;
        }

        #loge img {
            height: 40px;
            width: 40px;
            image-rendering: pixelated;
        }

        #loge p {
            color: #d1d1d1;
            font-size: 20px;
            margin: 0;
        }

        #login {
            height: 50px;
            display: flex;
            flex-direction: row;
            align-items: center;
        }

        #login p {
            color: #d1d1d1;
            font-size: 16px;
            margin: 0;
            user-select: none;
        }

        .operaButton {
            height: 30px;
            padding: 0 12px;
            background-color: #3a3a3a;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-left: 10px;
            border-radius: 6px;
            cursor: pointer;
            transition: background-color 0.2s ease;
            box-sizing: border-box;
        }

        .operaButton:hover {
            background-color: #505050;
        }

        #content {
            margin: 0 auto;
            width: 75%;
            min-height: calc(100vh - 50px);
            background-color: #2c2925;
        }

        #title {
            width: 90%;
            margin: 0 auto;
        }

        #title h1 {
            font-size: 50px;
            margin: 0 0 20px 0;
            color: #d1d1d1;
        }

        .custom-line {
            border: none;
            border-top: 2px solid #d1d1d1;
            width: 90%;
            margin: 20px auto;
        }

        #time {
            width: 90%;
            margin: 0 auto;
            display: flex;
            flex-direction: row;
        }

        #time p {
            color: #d1d1d1;
        }

        #information {
            width: 90%;
            margin: 0 auto;
            display: flex;
            flex-direction: row;
            justify-content: space-between;
        }

        /* 信息栏样式 */
        #effectInfo {
            width: 65%;
        }

        #effectInfo h1 {
            margin: 0;
            color: #d1d1d1;
        }

        #effectInfo p {
            margin: 0;
            font-size: 20px;
            padding: 5px;
            color: #d1d1d1;
        }

        /* 图片栏样式 */
        #otherImg {
            width: 30%;
            background-color: #444444;
            border: black 3px solid;
        }

        #imgBox {
            width: 100%;
            border-bottom: black 2px solid;
        }

        .smallTitle {
            background-color: #202e63;
        }

        .smallTitle p {
            margin: 0;
            font-size: 20px;
            padding: 5px;
            color: #d1d1d1;
            text-align: center;
        }

        #imgBox img {
            display: block;
            margin: 10px auto;
            width: 35%;
        }

        #otherInfo {
            border-bottom: black 2px solid;
        }

        .infoBar {
            width: 100%;
            display: flex;
            flex-direction: row;
            border-top: black 1px solid;
        }

        .infoName {
            width: 30%;
            background-color: #202e63;
        }

        .infoName p {
            margin: 0;
            font-size: 20px;
            padding: 5px;
            color: #d1d1d1;
        }

        .infoResult {
            width: 70%;
        }

        .infoResult p {
            margin: 0;
            font-size: 20px;
            padding: 5px;
            color: #d1d1d1;
            text-align: center;
        }

        #itemPoolInfo p {
            margin: 0;
            font-size: 20px;
            padding: 5px;
            color: #d1d1d1;
            text-align: center;
        }

        /* 底部占位符 */
        #bottomSpacer {
            height: 50px;
        }

        .editBtn {
            background-color: #3a3a3a;
        }

        .editBtn:hover {
            background-color: #505050;
        }

        .editBtn:active {
            background-color: #909090;
        }
    </style>
</head>
<body>
<div id="top">
    <div id="loge">
        <img src="img/site_avatar_isaac_l.webp" alt="Isaac Wiki">
        <p>以撒的结合Wiki</p>
    </div>
    <div id="login">
        <!-- 预留登录/注册区域 -->
    </div>
</div>
<div id="content">
    <div id="title">

    </div>
    <div id="time">
        <p id="createTime">创建时间：</p>
        <p id="changeTime">最后修改：</p>
    </div>

    <hr class="custom-line">

    <div id="information">

        <div id="effectInfo">
            <h1>效果</h1>
            <div id="itemDetail">

            </div>
        </div>

        <div id="otherImg">
            <div id="imgBox">
                <div class="smallTitle">
                    <p>图片</p>
                </div>
                <div id="imgArea">

                </div>
            </div>
            <div id="otherInfo">
                <div class="smallTitle">
                    <p>道具信息</p>
                </div>
                <div class="infoBar">
                    <div class="infoName">
                        <p>ID</p>
                    </div>
                    <div id="itemId" class="infoResult">

                    </div>
                </div>
                <div class="infoBar">
                    <div class="infoName">
                        <p>品质</p>
                    </div>
                    <div id="quality" class="infoResult">

                    </div>
                </div>
            </div>
            <div id="itemPool">
                <div class="smallTitle">
                    <p>道具池</p>
                </div>
                <div id="itemPoolInfo">

                </div>
            </div>
        </div>

    </div>
    <div id="bottomSpacer"></div>
</div>
</body>

<script src="js/jQuery-3.7.1.min.js"></script>
<script>
    function getQueryParam(name) {
        const urlParams = new URLSearchParams(window.location.search);
        return urlParams.get(name);
    }

    $(document).ready(function () {
        let itemId = getQueryParam("id");

        if (!itemId) {
            alert("请传入道具ID!");
            window.close();
        }
        const jwt = localStorage.getItem("jwt");
        const loginDiv = $("#login");

        if (jwt) {
            // 有 jwt，显示头像、名称和登出按钮
            const name = localStorage.getItem("name") || "用户";
            const imgUrl = localStorage.getItem("imgUrl") || "img/default_avatar.png";

            const userHtml = `
    <img src="${imgUrl}" alt="头像" id="userAvatar" style="height:30px; width:30px; border-radius:50%; vertical-align:middle; margin-right:8px; object-fit:cover;">
    <p id="userName" style="color:#d1d1d1; font-size:16px; margin:0; line-height:30px; display:inline-block; vertical-align:middle;">${name}</p>
    <div id="logoutBtn" class="operaButton" style="margin-left:12px;">
        <p>登出</p>
    </div>
`;
            loginDiv.html(userHtml);

            // 登出按钮暂时不绑定事件，后续可以加
            $("#logoutBtn").click(() => {
                // 清除登录相关的 localStorage 信息
                localStorage.removeItem("jwt");
                localStorage.removeItem("name");
                localStorage.removeItem("imgUrl");
                // 你如果存了别的登录相关信息，也一起清理，比如 id、username 等等
                localStorage.removeItem("id");
                localStorage.removeItem("username");

                // 刷新页面
                location.reload();
            });

            // ✅ 绑定头像和用户名点击跳转 userInfo.html
            $("#userAvatar, #userName").click(() => {
                window.open("userInfo.html");
            });

            // 添加修改道具信息按钮到 #bottomSpacer 上方
            const editBtnHtml = `
<div id="editItemBtn" class="operaButton editBtn" style="
    width: 160px;
    height: 40px;
    font-size: 18px;
    color: #d1d1d1;
    margin: 30px auto 0;
    text-align: center;
    line-height: 40px;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.2s ease;
">
    修改道具信息
</div>
`;
            $("#bottomSpacer").before(editBtnHtml);

// 点击跳转
            $("#editItemBtn").click(() => {
                window.location.href = `ChangeItem.html?id=${itemId}`;
            });

        } else {
            $("#login").html(
                '<div id="loginBtn" class="operaButton">' +
                '<p>登录</p>' +
                '</div>' +
                '<div id="registerBtn" class="operaButton">' +
                '<p>注册</p>' +
                '</div>'
            )
            $("#loginBtn").click(function () {
                window.location.href = "login.html";
            });
            $("#registerBtn").click(function () {
                window.location.href = "register.html";
            });
        }

        $.ajax({
            url: "http://localhost:8080/QueryItemById",
            type: "GET",
            data: {id: itemId},
            dataType: "json",
            success: function (res) {
                if (res.code !== 1) {
                    $("#itemDetail").html("<p>获取道具信息失败，返回码错误</p>");
                    return;
                }

                let data = res.data;
                let item = data.item;
                let attributes = data.itemsAttributes;
                let pools = data.itemPoolTypes;
                let synergies = data.synergies;
                let imgPath = data.itemImgPath;

                // 1️⃣ 名称
                $("#title").html(`<h1>${item.name}</h1>`);

                // 2️⃣ 创建/修改时间（保留原字）
                $("#createTime").html(`创建时间：${formatDate(item.createTime)}`);
                $("#changeTime").html(`&nbsp;&nbsp;&nbsp;&nbsp;最后修改：${formatDate(item.changeTime)}`);

                // 3️⃣ itemsAttributes（只填不为null的）
                for (let key in attributes) {
                    if (attributes[key] !== null && key !== "id") {
                        $("#itemDetail").append(`<p>${attributes[key]}</p>`);
                    }
                }

                // 4️⃣ item.effect
                if (item.effect) {
                    $("#itemDetail").append(`<p>${item.effect.replace(/\n/g, "<br>")}</p>`);
                }

                // 5️⃣ id 和 quality
                $("#itemId").html(`<p>${item.id}</p>`);
                $("#quality").html(`<p>${item.quality}</p>`);

                // 6️⃣ type === 1，加入power
                if (item.type === 1) {
                    $("#otherInfo").append(`
            <div class="infoBar">
                <div class="infoName">
                    <p>充能</p>
                </div>
                <div id="power" class="infoResult">
                    <p>${item.power}</p>
                </div>
            </div>
        `);
                }

                // 7️⃣ 图片
                $("#imgArea").html(`<img src="${imgPath.path}" alt="道具图片">`);

                // 8️⃣ itemPoolTypes name
                pools.forEach(pool => {
                    $("#itemPoolInfo").append(`<p>${pool.name}</p>`);
                });

                // 9️⃣ synergies 不为空则加入协同效应部分
                if (synergies.length > 0) {
                    $("#effectInfo").append(`
        <h1>协同效应</h1>
        <div id="synergy"></div>
    `);

                    synergies.forEach(syn => {
                        $("#synergy").append(`<p>ID${syn.itemBId}: ${syn.effect}</p>`);
                    });
                }
            },
            error: function () {
                $("#itemDetail").html("<p>获取道具信息失败，请检查服务器连接</p>");
            }
        });
    });

    function formatDate(isoString) {
        if (!isoString) return '';
        return isoString.replace('T', ' ');
    }
</script>
</html>